import React from 'react';
import { Picker, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import SubHeaderComponent from '../../../components/subHeader';
import { authLogin, localParam } from '../../../assets/js/utils';
import config from '../../../assets/js/conf/config';
import { province } from '../../../assets/data/province';
import * as Request from '../../../services/home/address';
import Css from '../../../assets/css/home/address/add.css';

class AddressModify extends React.Component{
    constructor(props){
        super(props);
        authLogin(props); //会员登录认证
        this.state = {
            defaultProvince: '',
            sProvince: '',
            sCity: '',
            sArea: '',
            sName: '',
            sCellphone: '',
            sAddress: '',
            bChecked: false
        }
        this.aid = localParam(this.props.location.search).search.aid;
    }

    componentDidMount(){
        this.getAddressInfo();
    }

    //获取收货地址信息
    getAddressInfo(){
        const { uid } = this.props.user;
        Request.getAddressInfo({ uid, aid: this.aid }).then(res => {
            if(res.code === 200){
                const { name, cellphone, province, city, area, address, isdefault } = res.data;
                this.setState({ sName: name, sCellphone: cellphone, sProvince: province, sCity: city, sArea: area, 
                sAddress: address, bChecked: isdefault === '1' ? true : false, defaultProvince: `${province} ${city} ${area}` });
            }
        });
    }

    //选择所在地区
    setAddress(e){
        const sArea = e[2] || '';
        this.setState({ sArea, defaultProvince: e.join(' '), sProvince: e[0], sCity: e[1] });
    }

    //输入框值改变
    formChange(e, name){
        this.setState({ [name]: e.target.value });
    }

    //保存收货地址
    submitData(){
        const { defaultProvince, sName, sCellphone, sAddress, bChecked, sProvince, sCity, sArea } = this.state;
        const isdefault = bChecked ? '1' : '0';
        if(sName.match(/^\s*$/)){
            Toast.info('请输入收货人姓名', 2);
            return false;
        }
        if(sCellphone.match(/^\s*$/)){
            Toast.info('请输入联系人手机号', 2);
            return false;
        }
        if(!sCellphone.match(/^1[0-9][0-9]{9}$/)){
            Toast.info('您输入的手机号格式不正确', 2);
            return false;
        }
        if(defaultProvince.match(/^\s*$/)){
            Toast.info('请选择所在地区', 2);
            return false;
        }
        if(sAddress.match(/^\s*$/)){
            Toast.info('请输入详细地址', 2);
            return false;
        }
        const params = {
            isdefault,
            aid: this.aid,
            uid: this.props.user.uid,
            name: sName, 
            cellphone: sCellphone,
            province: sProvince,
            city: sCity,
            area: sArea,
            address: sAddress
        };
        Request.modAddress(params).then(res => {
            if(res.code === 200){
                if(bChecked){
                    localStorage['aid'] = this.aid;
                    sessionStorage.removeItem('aid');
                }else{
                    localStorage.removeItem('aid');
                }
                Toast.info('修改成功', 2, () => {
                    this.goPage('address/index');
                });
            }else{
                Toast.info(res.data);
            }
        });
    }

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    render(){
        const { defaultProvince, sName, sCellphone, sAddress, bChecked } = this.state;
        return (
            <div className={Css['page']}>
                {/* 头部 */}
                <SubHeaderComponent title="添加收货地址" />
                {/* 内容主体 */}
                <div className={Css['main']}>
                    <ul>
                        <li>收货人</li>
                        <li><input type="text" placeholder="收货人姓名" value={sName} onChange={(e) => this.formChange(e, 'sName')} /></li>
                    </ul>
                    <ul>
                        <li>联系方式</li>
                        <li><input type="text" placeholder="联系人手机号" value={sCellphone} onChange={(e) => this.formChange(e, 'sCellphone')} /></li>
                    </ul>
                    <ul>
                        <li>所在地区</li>
                        <Picker extra="请选择(可选)"
                            data={province}
                            title="选择地区"
                            onOk={e => this.setAddress(e)}
                        >
                            <li><input type="text" placeholder="请选择收货地址" className={Css['area']} value={defaultProvince} readOnly /></li>
                        </Picker>
                    </ul>
                    <ul>
                        <li>详细地址</li>
                        <li><input type="text" placeholder="街道详细地址" value={sAddress} onChange={(e) => this.formChange(e, 'sAddress')} /></li>
                    </ul>
                    <ul>
                        <li>设置为默认地址</li>
                        <li><input type="checkbox" checked={bChecked} onChange={() => this.setState({ bChecked: !this.state.bChecked })} /></li>
                    </ul>
                    <button type="button" className={Css['submit-save']} onClick={() => this.submitData()}>保存</button>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(AddressModify);